<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>高考倒计时</title>
    <style>
      .paper {
        margin: auto;
        border: 2px solid;
        height: 250px;
        width: 500px;
      }
      .countdown {
        padding-top: 10px;
        text-align: center;
        font-family: 仿宋;
        font-size: 20px;
        opacity: 0.8;
      }

      .year {
        padding-top: 10px;
        text-align: center;
        font-size: 50px;
      }
      .concrect-time {
        padding-top: 20px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        justify-content: center;
        height: 50px;
        padding-left: 10px;
      }
      .time {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        border: 1px solid;
        width: 100px;
        height: 100px;
      }
      #Day,
      #Hour,
      #Minute,
      #Seconds {
        color: white;
        text-align: center;
        font-weight: bold;
        height: 60%;
        background-color: rgba(0, 0, 0, 0.714);
        width: 100px;
        padding-top: 15px;
      }
      .time2 {
        background-color: rgba(255, 255, 0, 0.585);
        width: 100px;
        height: 40%;
        text-align: center;
        padding-top: 15px;
      }
    </style>
  </head>
  <body>
    <div class="paper">
      <div class="countdown">Countdown to NCEE</div>
      <div class="year">2025</div>
      <div class="concrect-time">
        <div class="time">
          <div id="Day">NA</div>
          <div class="time2">days</div>
        </div>
        <div class="time">
          <div id="Hour">NA</div>
          <div class="time2">hours</div>
        </div>
        <div class="time">
          <div id="Minute">NA</div>
          <div class="time2">minutes</div>
        </div>
        <div class="time">
          <div id="Seconds">NA</div>
          <div class="time2">seconds</div>
        </div>
      </div>
    </div>
    <script>
      function getEndTime(myYear) {
        var myEndTime = new Date("" + myYear + "/06/07 00:00:00"); // 创建一个日期对象
        return myEndTime; // 返回这个时间对象
      }
      function countDown() {
        var mydate = new Date(); // 获取当前时间
        var year = "2025"; 
        var EndTime = getEndTime(year); // 调用getEndTime函数获取2025年6月7日00:00:00的时间对象
        var NowTime = new Date(); // 再次获取当前时间
        if (EndTime.getTime() - NowTime.getTime() < 0) {  // 如果结束时间已经过去（即当前时间晚于结束时间），则年份加1，并重新计算结束时间
          year = mydate.getFullYear() + 1; // 将年份设置为当年的下一年
          EndTime = getEndTime(year); // 再次计算新的结束时间
        }
        var t = EndTime.getTime() - NowTime.getTime(); // 计算当前时间与结束时间之间的毫秒差值
        var d = Math.floor(t / 1000 / 60 / 60 / 24); // 计算天数
        var h = Math.floor((t / 1000 / 60 / 60) % 24); // 计算小时数
        var m = Math.floor((t / 1000 / 60) % 60); //计算分钟数
        var s = Math.floor((t / 1000) % 60); // 计算秒数
        document.getElementById("Day").innerText = d; 
        document.getElementById("Hour").innerText = h; 
        document.getElementById("Minute").innerText = m; 
        document.getElementById("Seconds").innerText = s; // 将计算得到的天、小时、分钟和秒更新到页面上的对应元素中
      }
      setInterval(countDown, 1000);// 设置一个定时器，每隔1000毫秒调用一次countDown函数，实现倒计时
    </script>
  </body>
</html>
